<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus,House } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const API_BASE_URL = '/api'
const API_BASE_URL_img = '/apiCar'

import { useRoute, useRouter } from "vue-router";
const router = useRouter()

const  formData = reactive({
  image:[],
  distance:"",
})
const imageValue = ref()

const validateimage = (rule, value, callback) => {
  if (value.length === 1) {
    callback();
  } else {
    callback(new Error('请上传一张行驶证'));
  }
};
const rules = {
  image: [
    { required: true, message: '请上传图片' },
    { validator: validateimage, trigger: 'change' }
  ],
  distance:[
    { required: true, message: '请输入行驶里程' },
    {
      validator: (rule, value, callback) => {
        if (isNaN(value) || Number(value) < 0) {
          callback(new Error('请输入大于0的数字'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
}
const formRefInfo = ref(null)


// 身份证
const handleUploadSuccess1 = async (response, file, fileList) => {
  const formDataList = new FormData()
  formDataList.append('files', response.raw)
  formData.image = file

}
// 删除文件时的处理函数
const handleRemoveFile1 = (file, fileList) => {
  const fileIndex = fileList.indexOf(file)
  if (fileIndex > -1) {
    // 从数组中移除对应的完整路径
    formData.image.splice(fileIndex, 1)
  }
  ElMessage.success('已删除行驶证照片')
}
const handleExceed1 = (files, uploadFiles) => {
  ElMessage.warning('最多上传一张图片')
}

const submitLoading = ref(false)
// 提交按钮
const submitForm = async () => {
  if (!formRefInfo.value) return
  const valid = await formRefInfo.value.validate()
  if(valid){
    submitLoading.value=true
    const formDataList = new FormData()
    formData.image.forEach(item=>{
      formDataList.append('image', item.raw)
    })
    formDataList.append('distance', formData.distance)
    // TODO: 实现表单提交逻辑
    const res = await axios.post(`/car/assess`,formDataList).catch(err=>{submitLoading.value=false})
    if(res.data.code == 200) {
      submitLoading.value=false
      ElMessage.success('提交成功')
    }else{
      submitLoading.value=false

      ElMessage.warning(res.data.message)
    }
  }
}


// 返回首页
const backHome = () =>{
  router.push({path: '/menu'})
}

</script>

<template>
  <div class="infoCotent">
    <div style="display: flex;flex-direction: row;align-items: center;color: #409eff;cursor: pointer" @click="backHome">
      <el-icon ><House color="#409eff" size="20"/></el-icon>
      <span>首页</span>
    </div>

    <el-form
        ref="formRefInfo"
        :model="formData"
        :rules="rules"
        label-width="140"
        class="loan-form-container">

      <!-- 证件上传 -->
      <el-divider>行驶证上传</el-divider>
      <el-form-item label="行驶证" prop="image" required>
        <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :limit="1"
            list-type="picture-card"
            :on-change="handleUploadSuccess1"
            @remove="handleRemoveFile1"
            :on-exceed="handleExceed1"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="行驶里程" prop="distance" required>
        <el-input v-model="formData.distance" type="number"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm" :loading="submitLoading">提交信息</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<style scoped>
.infoCotent {
  padding: 5px 20px;
}
</style>
